<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>学生管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/template.css}" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                    <button class="layui-btn layuiadmin-btn-list" onclick="importToMyBook()">点击将学生导入我的课程
                    </button>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="font-size: 16px;line-height: 32px">选择班级</label>
                        <div class="layui-input-inline">
                            <select id="classes" name="classes" lay-filter="demo" lay-verify="required">
                                <option value="0">请选择班级</option>
                                <option th:each="i,c:${classes}"
                                        th:value="${c.current}">[[${c.current}]]
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="font-size: 16px;line-height: 32px">选择课程</label>
                        <div class="layui-input-inline">
                            <select id="book_name" name="book_name" lay-filter="demo" lay-verify="required">
                                <option value="0">请选择课程</option>
                                <option th:each="book_name:${bookList}"
                                        th:value="${book_name}">[[${book_name}]]
                                </option>
                            </select>
                        </div>
                    </div>
                </div>

            </div>

            <!--表单主体部分-->
            <table id="studentInfoList" lay-filter="studentInfo">

            </table>

            <div id="TeacherTableBar" style="display: none;">
                <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </div>

            <script type="text/html" id="table-content-list">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
                        class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                        class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
        </div>
    </div>
</div>
<script th:src="@{/static/js/jquery-1.11.1.js}"></script>
<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script>
    function importToMyBook(){
        let classes= $("#classes").val();
        let book_name=$("#book_name").val();
        if(classes==="0"){
            layer.msg("请选择班级")
            return
        }else if(book_name==="0"){
            layer.msg("请选择课程")
            return
        }
        console.log(classes)
        console.log(book_name)
        $.ajax({
            type: "get",
            url: "/back/importToMyBook",
            dataType: 'JSON',
            async: false,
            data: {
               classes:classes,
              book_name:book_name
            },
            success(Msg){
                if(Msg.code==100){
                    layer.msg("操作成功")
                    setTimeout(()=>{
                        window.location.reload()
                    },1000)

                }else layer.msg("操作失败")
            }
        })
    }
</script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'contlist', 'table', 'laypage', 'upload', 'layer', 'laydate', 'jquery', 'form'], function () {
        var $ = layui.$
            , table = layui.table
            , form = layui.form
            , upload = layui.upload
            , layer = layui.layer;

        var laypage = layui.laypage;

        //方法级渲染
        table.render({
            elem: '#studentInfoList'
            , id: 'studentInfoList'
            , url: '/back/queryMy'
            , title: '班级通知列表'
            // ,toolbar: '#bwgzfkToolBar'
            , cellMinWidth: 200
            , page: true
            , limit: 7
            , height: 'full-221'
            , cols: [
                [
                    {checkbox: true, fixed: true}
                    , {type: 'id', field: 'num', title: '学号', width: 150, fixed: 'left', align: "center"}
                    , {field: 'name', title: '姓名', width: 150, align: 'center'}
                    , {field: 'classes', title: '班级', width: 100, align: 'center'}
                    , {field: 'book_name', title: '学习课程', width: 200, align: 'center'}
                    , {field: 'loginTime', title: '最后一次登录时间', width: 150, align: 'center'}
                    , {title: '操作', toolbar: '#table-content-list', width: 220, align: 'center'}
                ]
            ]
            , parseData: function (res) {
                return {
                    "code": 0,
                    "msg": res.msg,
                    "data": res.payload.content, //返回值 json 的key
                    "count": res.payload.total
                }
            }
        });

        // 修改和删除等操作
        //监听行工具事件
        table.on('tool(studentInfo)', function (obj) {
            const data = obj.data;
            const studentNumber = data.num;

            if (obj.event === 'del') {
                // 删除信息
                layer.confirm('真的要删除这一行么', function (index) {
                    $.ajax({
                        type: 'GET',
                        async: true,
                        url: "/back/delStudent",
                        dataType: 'JSON',
                        data: {
                            studentNumber: studentNumber
                        },
                        success: function (res) {
                            if (res.code === 200) {
                                layer.msg(res.msg, {time: 1000, icon: 5})
                            } else {
                                layer.msg('删除成功', {
                                    time: 1000, icon: 6
                                })
                                location.reload()
                            }
                        },
                        error: function (data) {
                            layer.msg("删除时发生错误，请重试...", {time: 1000, icon: 7})
                            return false;
                        }
                    })
                    obj.del();
                    layer.close(index);
                });

            } else if (obj.event === 'edit') {
                //编辑信息
                layer.open({
                    type: 2,
                    title: '修改学生信息',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭
                    content: '/back/toEditStudent/' + studentNumber,
                    area: screen() < 1 ? ['90%', '450px'] : ['760px', '480px']
                    , btn: ['修改', '取消']
                    , yes: function (index, layero) {
                        const iframeWindow = window['layui-layer-iframe' + index]
                            , submitID = 'submit'
                            , submit = layero.find('iframe').contents().find('#' + submitID);
                        //监听提交
                        iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                            const field = data.field; //获取提交的字段

                            //号码的正则表达式
                            let phonereg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
                            const phone = phonereg.test(field.phone);

                            if (!phone) {
                                alert("请输入正确手机号");
                            }
                            else if (field.sex != "男" && field.sex != "女") {
                                alert("性别只有男女呦~");
                            } else {
                                $.ajax({
                                    type: "POST",
                                    url: "/back/updateStudent",
                                    dataType: 'JSON',
                                    async: false,
                                    data: field,
                                    success: function (res) {
                                        if (res.code === 200) {
                                            layer.msg(res.msg, {time: 1000, icon: 5})
                                        } else {
                                            layer.msg('修改成功', {
                                                icon: 6, time: 2000, end: function () {
                                                    var index = parent.layer.getFrameIndex(window.name);
                                                    parent.layer.close(index)
                                                }
                                            })
                                        }
                                    },
                                    error: function (data) {
                                        layer.msg("修改时发生错误，请重试...", {time: 1000, icon: 7})
                                    }
                                });
                            }
                            table.reload('studentInfoList'); //数据刷新
                            table.reload('studentInfoList'); //数据刷新
                            layer.close(index)
                        });
                        submit.trigger('click');
                    }
                })
            }
        })

        //判断浏览器大小方法
        function screen() {
            //获取当前窗口的宽度
            var width = $(window).width();
            if (width > 768) {
                return 1;   //小屏幕
            } else {
                return 0;   //超小屏幕
            }
        }

        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
</body>
</html>
